<template>
  <div>
    <input type="file" @change="onChange" />
  </div>
</template>

<script lang="ts" setup>
import { onMounted } from "vue";

let worker: Worker;

onMounted(() => {
  // 创建 worker
  worker = new Worker("./src/worker.js", { type: "module" });
});

const onChange = (event: Event) => {
  // 1. 获取 file 对象
  const file = (event.target as HTMLInputElement).files?.[0]!;
  // 2. 向 worker 发消息
  worker.postMessage(file);
  // 3. 监听 worker 回来的消息
  worker.onmessage = function (event) {
    console.log("回来了", event.data);
  };
};

// const fn1 = () => {
//   // 创建一个 worker
//   const worker = new Worker("./src/worker.js", {
//     type: "module",
//   });

//   // 监听 worker 中传输过来的消息
//   worker.onmessage = function (event) {
//     console.log("收到 worker 线程的消息", event.data);
//   };

//   setTimeout(() => {
//     // 向 worker 发消息
//     worker.postMessage("hello");
//   }, 1000);
// };
</script>
